<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css_text</title>
    <!-- 用HTML提供的style标签包裹css代码 -->
    <style>
        /* 1.标签名选择器:根据标签的名字选中 */
        div {
            /* 练习1:修饰div的样式 */
            color: red;
            /* 字的颜色 */
            background-color: darkgray;
            /* 背景色 */
            border-style: dashed;
            /* 边框的样式,虚线 */
            border-color: blue;
            /* 边框的颜色 */
        }

        span {
            /* 练习2:修饰span的样式 */
            font-size: 30px;
            /* 字号 字体 */
            font-family: "黑体";
            /* 字体 */
        }

        /* 2.class选择器:根据class属性的值选中元素,class的值能相同
				步骤:给元素加class属性+通过.获取元素 
			*/
        .a {
            /* 练习3:修饰div1的样式*/
            font-size: 25px;
            /* 字号 */
        }

        .b {
            /* 练习4:修饰span1的样式 */
            opacity: 0.4;
            /* 透明度 0.0~1.0,数值越小越透明 */
        }

        /* 3.id选择器:根据id属性的值选中元素,要求id的值不能相同 
				步骤:给元素添加id属性 + 通过#获取值
			*/
        #c {
            /* 练习5:修饰a2的样式 */
            border-style: solid;
            /* 边框的样式:实线*/
            border-radius: 25px;
            /* 圆角 */
        }
    </style>
</head>

<body>
    <div class="a">我是div1</div>
    <div>我是div2</div>
    <span class="b">我是span1</span>
    <span>我是span2</span>
    <a class="a b">我是a1</a>
    <!--同时拥有a b两种样式的修饰-->
    <a id="c">我是a2</a>
</body>

</html>